<template>
  <div class="pagination">
    <button class="pagination-btn number">
      <span class="iconfont icon-arrow-left"></span>
    </button>
    <ul class="pagination-pager">
      <li class="number">1</li>
      <li class="iconfont icon-ellipsis number"></li>
      <!-- 中间数据的展示 -->
      <!--4 6 8 加一是为了多遍历一次，刚好遍历5次数据 -->
      <li 
      v-for="(item,index) in startEnd.end- startEnd.start+1" :key="index">
          <!-- index 0-4  start:4 -->
          {{index+startEnd.start}}
      </li>
      <!-- <li class="number">3</li>
      <li class="number">4</li>
      <li class="number active">5</li>
      <li class="number">6</li>
      <li class="number">7</li> -->
      <li class="iconfont icon-ellipsis number"></li>
      <li class="number">{{ totalPages }}</li>
    </ul>
    <button class="pagination-btn number">
      <span class="iconfont icon-arrow-right"></span>
    </button>

    <select class="pagination-sizes">
      <option value="5">每页 5 条</option>
      <option value="10">每页 10 条</option>
      <option value="15">每页 15 条</option>
      <option value="20">每页 20 条</option>
    </select>

    <span class="pagination-total">总 100 条</span>
  </div>
</template>

<script>
export default {
  name: "Pagination",

  data() {
    return {};
  },
  props: [
    //    :current-page="6"
    //           :page-size="options.pageSize"
    //           :page-sizes="[5, 10, 15, 20]"
    //           :total="100"
    "currentPage",
    "pageSize",
    "pageSizes",
    "total",
  ],
  computed: {
    //   总页数
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    },
    // 中间的开始页数
    startEnd() {
      let start = this.currentPage - 2;
      let end = this.currentPage + 2;
    
      return {
        start,
        end,
      };
    },
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.pagination {
  display: flex;
  font-size: 13px;
  align-content: center;
  justify-content: center;
  width: 100%;
}
.pagination-pager {
  display: flex;
}
.pagination-btn {
  border: none;
  outline: none;
}
.number {
  display: flex;
  align-content: center;
  justify-content: center;
  height: 28px;
  line-height: 28px;
  background-color: #f4f4f5;
  color: #606266;
  margin: 0 5px;
  min-width: 30px;
  border-radius: 2px;
  &.active {
    background-color: #409eff;
    color: #fff;
  }
}
.pagination-sizes {
  margin: 0 20px;
  height: 30px;
}
</style>